
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>
  
    English
  
</title>

<!-- Bootstrap core CSS -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../docs-assets/ico/apple-touch-icon-144-precomposed.png">
                               <link rel="shortcut icon" href="../docs-assets/ico/favicon.png">
<style type="text/css">
body {
	background: #cccccc;
}
input {
	background: transparent;
	position: absolute;
	z-index:99;
	border: 0px;
	padding: 0px;
}
#dst i {
	font-style: normal;
	border-bottom: 2px solid red;;
	background: yellow;
	color: yellow;
}
#dst {
	color: transparent;
}
</style>
<script>

var sound;
var cfg_tasks;
var cfg_sound;
var cfg_last_input;
var cfg_dst;
var cfg_auto_auding = true;
var cfg_trunk;

function init() {
	cfg_trunk = $('#cfg_trunk').val();
	control_input = $('#input');
	control_src = $('#src');
	control_dst = $('#dst');
	control_rate = $('#rate');
	$('#input').focus();
	soundManager.setup({
	  // where to find flash audio SWFs, as needed
	  url: '/static/soundmanager/swf/',
	  /*onready: function() {
	    // SM2 is ready to play audio!
	    soundManager.play('a_billion', '/sound/english/a_billion.mp3');
	  }*/
	});
	$( "body" ).keydown(function(event) {
		control(event);
	});
}

var control_input = null;
var control_src = null;
var control_dst = null;
var control_rate = null;

function loadResource(name) {
	$.getJSON( "/?level="+name, function(data) {
		tasks = data;
		next();
	});
}

function next() {
	var item = tasks.shift();
	tasks.push(item);
	control_src.text(item[1]);
	cfg_dst = item[0].split('');
	control_dst.text('');
	control_rate.text('');
	control_input.val('');
	cfg_sound = soundManager.createSound({
      id: item[2],
      url: '/sound/{{dst_lang}}/'+item[2]+'.mp3'
    });
}

function insert(key) {
	var length = cfg_last_input.length;
	if (!key) {
		if (length < cfg_dst.length) length += 1;
		var val = cfg_dst.slice(0, length).join('');
		control_input.val(val);
		verify(val);
	}
}

function speak(auto) {
	if (!auto || (auto && cfg_auto_auding)) {
		cfg_auto_auding = false;
		setTimeout(function() {cfg_auto_auding = true;}, 5000);
		cfg_sound.play();
	}
}

function verify(val) {
	var items = val.split('');
	control_dst.html('');
	for (k in items) {
		if (items[k] != cfg_dst[k]) {
			if (items[k] == ' ') var item = '<i>&nbsp;</i>';
			else var item = '<i>'+items[k]+'</i>';
		} else {
			var item = items[k];
		}
		control_dst.html(control_dst.html() + item);
	}
	var wrong_items = control_dst.find('i');
	if (wrong_items.length) speak(true);
	var rate = parseInt(100 * (items.length - wrong_items.length) / cfg_dst.length);
	control_rate.text(rate + '%');
	if (rate == 100) {
		speak(true);
	}
}

function control(event) {
	setTimeout(function() {
		var val = control_input.val();
		if (cfg_last_input != val) {
			cfg_last_input = val;
			verify(val);
		}
	}, 100);
	if ($.inArray(event.which, [45, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 107]) >= 0) {
		event.preventDefault();
	}
	switch (event.which) {
		case 35:; case  97: insert(1); break;
		case 40:; case  98: insert(2); break;
		case 34:; case  99: insert(3); break;
		case 37:; case 100: insert(4); break;
		case 12:; case 101: insert(5); break;
		case 39:; case 102: insert(6); break;
		case 36:; case 103: insert(7); break;
		case 38:; case 104: insert(8); break;
		case 33:; case 105: insert(9); break;
		case 45:; case  96: insert(0); break;
		case 13:  speak(); break;
		case 107: next();
	}
}
</script>

  </head>
  <body style="font-size: 234%; margin: 5em;" onload="init();">
<input type="hidden" id="cfg_trunk" value="{{trunk}}" />
<div id="resources" class="btn-group" data-toggle="buttons">
{% for i in resources %}
  <label class="btn btn-primary" onclick="loadResource(jQuery.trim($(this).text()))">
    <input type="radio" name="options"> {{i}}
  </label>
{% endfor %}
</div>
<br />
<br />
<br />
<p id="src" > </p>
<input id="input" type="text" style="width:100%" onfocusout="setTimeout('$(\'#input\').focus()', 100)" />
<p id="dst" > </p>
<p id="rate" ></p>





    <!-- JS and analytics only. -->
    <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/jquery-1.10.2.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/soundmanager/script/soundmanager2.js"></script>

  </body>
</html>
